<template>
  <view class="function-modules-new">
    <view class="section-header">
      <text class="section-title-new">🎯 功能中心</text>
      <text class="section-subtitle">更多功能与服务</text>
    </view>
    
    <scroll-view class="function-scroll-new" scroll-x="true" show-scrollbar="false">
      <view class="function-list-new">
        <!-- 每日签到 - 特殊样式 -->
        <view class="function-card-new checkin-card" @click="handleCheckin">
          <view class="function-gradient gradient-checkin"></view>
          <view class="shimmer-overlay" v-if="!isCheckedIn"></view>
          <text class="function-icon-new">📅</text>
          <text class="function-name-new">每日签到</text>
          <view class="checkin-badge" v-if="!isCheckedIn">
            <text class="badge-text">可签到</text>
          </view>
          <view class="checkin-badge checked" v-else>
            <text class="badge-text">已签到</text>
            <text class="countdown-text" v-if="countdownText">{{ countdownText }}</text>
          </view>
        </view>
        
        <!-- 其他功能卡片 -->
        <view class="function-card-new" @click="navigateToGame">
          <view class="function-gradient gradient-game"></view>
          <text class="function-icon-new">🎮</text>
          <text class="function-name-new">游戏</text>
        </view>
        
        <view class="function-card-new" @click="navigateToAchievements">
          <view class="function-gradient gradient-trophy"></view>
          <text class="function-icon-new">🏆</text>
          <text class="function-name-new">成就</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'FunctionModules',
  props: {
    isCheckedIn: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      countdownText: '',
      countdownTimer: null
    }
  },
  watch: {
    isCheckedIn: {
      handler(newVal) {
        if (newVal) {
          this.startCountdown()
        } else {
          this.stopCountdown()
        }
      },
      immediate: true
    }
  },
  onUnload() {
    this.stopCountdown()
  },
  methods: {
    handleCheckin() {
      if (!this.isCheckedIn) {
        this.$emit('checkin')
      }
    },
    navigateToGame() {
      this.$emit('navigate', '/pages/game/list/list')
    },
    navigateToAchievements() {
      this.$emit('navigate', '/pages/achievements/achievements')
    },
    startCountdown() {
      // 计算到明天凌晨的时间
      const now = new Date()
      const tomorrow = new Date(now)
      tomorrow.setDate(tomorrow.getDate() + 1)
      tomorrow.setHours(0, 0, 0, 0)
      
      this.updateCountdown(tomorrow)
      
      // 启动定时器，每秒更新一次
      this.countdownTimer = setInterval(() => {
        this.updateCountdown(tomorrow)
      }, 1000)
    },
    updateCountdown(tomorrow) {
      const now = new Date()
      const diff = tomorrow - now
      
      if (diff <= 0) {
        this.countdownText = ''
        this.stopCountdown()
        return
      }
      
      // 计算小时、分钟、秒
      const hours = Math.floor(diff / (1000 * 60 * 60))
      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
      const seconds = Math.floor((diff % (1000 * 60)) / 1000)
      
      // 格式化倒计时文本
      this.countdownText = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
    },
    stopCountdown() {
      if (this.countdownTimer) {
        clearInterval(this.countdownTimer)
        this.countdownTimer = null
      }
      this.countdownText = ''
    }
  }
}
</script>

<style scoped>
/* ========== 功能模块 - 全新设计 ========== */
.function-modules-new {
  margin-bottom: 28rpx;
}

.section-header {
  margin-bottom: 20rpx;
}

.section-title-new {
  font-size: 30rpx;
  font-weight: bold;
  color: #1f2937;
  display: block;
  margin-bottom: 6rpx;
}

.section-subtitle {
  font-size: 22rpx;
  color: #9ca3af;
  display: block;
}

.function-scroll-new {
  white-space: nowrap;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.function-list-new {
  display: inline-flex;
  gap: 16rpx;
  padding-right: 20rpx;
}

.function-card-new {
  position: relative;
  width: 160rpx;
  height: 180rpx;
  background: white;
  border-radius: 22rpx;
  padding: 24rpx 16rpx;
  text-align: center;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.function-card-new:active {
  transform: translateY(-6rpx);
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
}

.function-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80rpx;
  opacity: 0.15;
}

.function-gradient.gradient-checkin {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
}

.function-gradient.gradient-game {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.function-gradient.gradient-trophy {
  background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
}

.function-icon-new {
  font-size: 52rpx;
  display: block;
  margin-bottom: 12rpx;
  filter: drop-shadow(0 2rpx 6rpx rgba(0, 0, 0, 0.1));
  animation: icon-float 3s ease-in-out infinite;
  z-index: 1;
}

@keyframes icon-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8rpx); }
}

.function-card-new:nth-child(1) .function-icon-new { animation-delay: 0s; }
.function-card-new:nth-child(2) .function-icon-new { animation-delay: 0.2s; }
.function-card-new:nth-child(3) .function-icon-new { animation-delay: 0.4s; }

.function-name-new {
  font-size: 24rpx;
  color: #374151;
  font-weight: 600;
  z-index: 1;
}

/* 签到卡片特殊效果 */
.checkin-card {
  position: relative;
  border: 2rpx solid transparent;
  background-image: linear-gradient(white, white), linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.shimmer-overlay {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 70%
  );
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.checkin-badge {
  position: absolute;
  top: 12rpx;
  right: 8rpx;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
  color: white;
  font-size: 18rpx;
  padding: 4rpx 8rpx;
  border-radius: 8rpx;
  box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.4);
  z-index: 2;
  animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.badge-text {
  font-weight: bold;
  font-size: 18rpx;
}

.checkin-badge.checked {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  animation: none;
  padding: 2rpx 8rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rpx;
}

.countdown-text {
  font-size: 14rpx;
  font-weight: normal;
  opacity: 0.9;
}
</style>

